<template>
	<view class="content">
		<view
			v-for="(val, index) of list"
			:key="index"
			class="white"
			:class="{ red: !val.forfeit }"
			style="margin: 15upx 20upx;border-radius: 10upx;padding: 15upx;    box-shadow: #e5e5e5 4px 4px 4px 0px"
		>
			<view style="font-size: 30upx;padding-bottom: 20upx;"><text class="hui">依据条例:</text>{{ val.content }}</view>
			<view style="display:flex;justify-content: space-between;font-size: 26upx;">
				<view style="flex: 1;padding-right: 15upx;word-break : break-all;"><text class="hui">执法种类:</text>{{ val.types }}</view>
				<view style="flex: 1;padding-left: 15upx;word-break : break-all;"><text class="hui">处罚结果:</text>{{ val.result }}</view>
			</view>
			<view style="font-size: 26upx;margin-top: 20upx;">
				<text class="hui">是否处理:</text><text v-show="val.forfeit">已处理</text><text v-show="!val.forfeit">未处理</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import CHONG from '../../static/js/function.js';
export default {
	computed: mapState(['URL', 'TOKEN']),
	data() {
		return {
			list: []
		};
	},
	methods: {
		...mapMutations(['GET_TOKEN', 'LOGIN']),
		getList(e) {
			uni.request({
				url: this.URL + 'cfxq',
				data: {
					dogId: e
				},
				success: res => {
					console.log(res.data);
					if (res.data.success) {
						let json = res.data;
						this.list = json.data;
						if (json.data.length === 0) {
							CHONG.tip(res.data.msg);
						}
					} else {
						CHONG.tip('网络错误请稍后再试');
					}
				}
			});
		}
	},
	onLoad(e) {
		console.log(e.id);
		this.getList(e.id);
	}
};
</script>

<style lang="scss">
.white {
	background-color: white;
}
.red {
	background: $chong-iconbg-color;
}
.hui{
	color: #7d7d7d;
	}
.bg {
	// background: $chong-iconbg-color;
	height: 230upx;
	padding: 20upx;
	.card {
		margin: 20upx;
		border-radius: 50upx;
		background: white;
		display: flex;
		flex-direction: column;
		padding: 36upx;
		box-shadow: 0upx 3upx 6upx rgba($chong-text-color, 0.71);
		.top {
			display: flex;

			.left {
				margin-right: 30upx;
				width: 180upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				& > image {
					width: 180upx;
					height: 180upx;
					border-radius: 20upx;
				}
				text {
					font-size: 24upx;
					line-height: 38upx;
				}
				text:nth-of-type(2) {
					color: $chong-text-color;
				}
				button {
					margin-top: 10upx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0;
					width: 100%;
					image {
						width: 40upx;
						height: 40upx;
					}
				}
			}
			.right {
				display: flex;
				flex-direction: column;
				flex: 1;
				text {
					font-size: 26upx;
					line-height: 52upx;
					color: $chong-text-color;
					border-bottom: 1upx solid rgba($chong-text-color, 0.71);
					text {
						border: none;
						color: rgba(53, 53, 53, 1);
					}
				}
			}
		}
	}

	// .btn {
	// 	button {
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		color: $chong-text-color;
	// 		font-size: 30upx;
	// 		line-height: 90upx;
	// 		image {
	// 			width: 50upx;
	// 			height: 50upx;
	// 			padding-right: 20upx;
	// 		}
	// 	}
	// }
}
.nav {
	margin-top: 40upx;
	display: flex;
	justify-content: space-between;
	view {
		box-sizing: border-box;
		text-align: center;
		width: 150upx;
		height: 100upx;
		display: flex;
		flex-direction: column;
		font-size: 26upx;
		background: linear-gradient(left, #fa9821, #ffbf68);
		border-radius: 20upx;
		color: white;
		text:nth-of-type(2) {
			text-align: center;
			font-size: 36upx;
			padding-top: 10upx;
		}
	}
	view:nth-of-type(2) {
		background: linear-gradient(left, #928cfb, #bfbdfe);
	}
	view:nth-of-type(3) {
		background: linear-gradient(left, #3796fc, #a9d2fe);
	}
}
</style>
